<template>
	<view class="box">
		<view class="top-num">
			<view class="num-name">入金金额：</view>
			<view class="num-value">{{ rujin_jine }}元</view>
		</view>
		<view class="bank-img">
			<view class="bank-num">
				<span id="foo">{{ bank_bh }}</span>
				<button class="copy" @tap="copy">点击复制</button>
			</view>
			<view class="bank-list">账户名：{{ kh_xingming }}</view>
			<view class="bank-list">开户银行：{{ bank_name }}</view>
			<view class="bank-list">开户支行：{{ bank_khh }}</view>
		</view>
		<view class="tishi">
			<h3>温馨提示</h3>
			<view class="list">请您核对好银行信息，转账完成之后联系相关业务经理。</view>
		</view>
		<view class="beizhu">
			<view class="title">转账备注</view>
			<view class="item">
				<text>账户姓名</text>
				<input type="text" v-model="username" />
			</view>
			<view class="item">
				<text>备注</text>
				<input type="text" v-model="beizhu" />
			</view>
		</view>
		<view class="bottom">
			<view @tap="cacle">取消充值</view>
			<view class="queren" @tap="fukuan">我已付款</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			rujin_jine: '',
			bank_bh: '',
			bank_khh: '',
			kh_xingming: '',
			bank_name: '',
			bank_id: '',
			rujin_id: '',
			username: '',
			beizhu: ''
		};
	},
	computed: mapState({
		userinfo: 'userinfo'
	}),
	methods: {
		cacle(){
			var data={
				rujin_id: this.rujin_id,
				token: uni.getStorageSync('token')
			}
			this.$store.dispatch('cancelrecharge', data).then(res => {
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
				if(res.data.code==1){
					setTimeout(()=>{
						uni.switchTab({
							url:'../../money/index'
						})
					},1000)
				}
			});
			
		},
		fukuan() {
			if (this.username && this.beizhu) {
				var data = {
					rujin_id: this.rujin_id,
					bank_id: this.bank_id,
					yh_xingming: this.username,
					remark: this.beizhu,
					token: uni.getStorageSync('token')
				};
				this.$store.dispatch('confirmrecharge', data).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
					if(res.data.code==1){
						setTimeout(()=>{
							uni.switchTab({
								url:'../../money/index'
							})
						},1000)
					}
				});
			} else {
				uni.showToast({
					title: '姓名和备注不能为空',
					icon: 'none'
				});
			}
		},
		copy() {
			uni.setClipboardData({
				data: 'hello',
				success: function() {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			});
		}
	},
	onLoad(e) {
		this.rujin_jine = e.rujin_jine;
		this.bank_bh = e.bank_bh;
		this.bank_khh = e.bank_khh;
		this.kh_xingming = e.kh_xingming;
		this.bank_name = e.bank_name;
		this.rujin_id = e.rujin_id;
		this.bank_id = e.bank_id;
	}
};
</script>

<style lang="scss" scoped>
.box {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 40rpx;
	display: flex;
	flex-direction: column;
}

.top-num {
	height: 80rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #e4e4e4;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	color: black;
}

.top-num .num-name {
	font-size: 32rpx;
}

.top-num .num-value {
	font-size: 60rpx;
}

.bank-img {
	margin-top: 40rpx;
	/* height: 362rpx; */
	width: 100%;
	background: linear-gradient(to bottom right, #8ab2e2, #2b55b6);
	/* 标准的语法 */
	color: white;
	box-sizing: border-box;
	border-radius: 10rpx;
	overflow: hidden;
	padding: 30rpx 30rpx;
}

.bank-img .bank-num {
	font-size: 28rpx;
	margin-bottom: 30rpx;
	display: flex;
}

.bank-img .bank-list {
	font-size: 28rpx;
	line-height: 2em;
}

.bank-img .bank-num button {
	border: none;
	background: rgba(255, 255, 255, 0.3);
	/* width: 138rpx; */
	height: 44rpx;
	line-height: 44rpx;
	font-size: 26rpx;
	color: white;
	margin-left: 20rpx;
	border-radius: 10rpx;
	outline: none;
}

.bank-img .bank-num button:active {
	opacity: 0.8;
}

.tishi {
	margin-top: 40rpx;
}

.tishi h3 {
	font-size: 28rpx;
	font-weight: 400;
}

.tishi .list {
	color: #9b9b9b;
	font-size: 26rpx;
	margin: 12rpx 0;
	line-height: 36rpx;
}

.beizhu {
	flex: 1;
	.title {
		padding: 30rpx 0;
	}
	.item {
		display: flex;
		background-color: #f4f4f4;
		height: 76rpx;
		line-height: 76rpx;
		margin-bottom: 25rpx;
		padding: 0 40rpx;
		border-radius: 10rpx;

		text {
			display: inline-block;
			width: 150rpx;
		}
		input {
			width: 500rpx;
			height: 50rpx;
			padding: 13rpx 0;
		}
	}
}
.bottom {
	display: flex;
	justify-content: space-around;

	view {
		width: 318rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		background-color: #c3c3c3;
		border-radius: 50rpx;
		font-size: 32rpx;
	}
	.queren {
		background-color: #78c377;
	}
}
</style>
